<template>
  <view class="w-100 px-2-6">
    <view
      class="w-100 h222 f-b-c circle34 show0 mb-3 bg-f8ff re"
      @click="get_cpupon(item)"
      v-for="(item, index) in coupon_list"
      :key="index"
    >
      <Left :item="item" :key="index"></Left>
      <view class="w470 bg-white h222 fs-b-b pl-4 pr-2 py-3 ty-circle-box">
        <view>
          <view class="font32 t-20 font600 h32" v-if="item.status === 1">
            <text class="text-red mr-1"
              >[{{ coupon_type[item.orderType] }}]</text
            >
            {{ item.name || "" }}</view
          >
          <view class="font32 t-8 font600 h32" v-else
            ><text class="text-light-black mr-1"
              >[{{ coupon_type[item.orderType] }}]</text
            >{{ item.name || "" }}</view
          >
          <view class="font24 t-8 pt-1">{{ item.notice || "" }}</view>
        </view>
        <view class="w-100">
          <view class="font24 t-8" v-if="item.status == 1"
            >到期时间：{{ item.expiredTime || "" }}</view
          >
          <view class="font24 text-success" v-else-if="item.status == 2"
            >已使用</view
          >
          <view class="font24 text-hover-warning" v-else-if="item.status == 0"
            >已失效</view
          >
          <view class="font24 t-8 f-b-c" v-else>
            <view>
              {{
                item.effectiveType == 1
                  ? `有效期到${item.expiredTime}`
                  : `领取后${item.effectiveDays}天内有效`
              }}
            </view>
            <view
              @click.stop="redemption_info(item)"
              class="px-2-4 w150 h52 f-c-c circle12"
              :class="item.receive ? 'bg-e4 t-8' : 'bg-theme t-0'"
              >{{ item.receive ? "已领取" : "未领取" }}</view
            >
          </view>
        </view>
      </view>
      <view class="ab left206 top0 bottom0">
        <view
          class="w12 h12 show0-in ab left14 top28 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top50 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top72 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top94 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top116 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top138 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top160 bg-f8ff rounded-circle"
        ></view>
        <view
          class="w12 h12 show0-in ab left14 top182 bg-f8ff rounded-circle"
        ></view>
        <view
          class="ab left0 w40 h40 bg-f8ff show-in-bottom"
          style="top: -20rpx"
        ></view>
        <view
          class="ab left0 w40 h40 bg-f8ff show-in-top"
          style="bottom: -20rpx"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
import Left from "./components/left.vue";
export default {
  props: {
    coupon_list: {},
  },
  data() {
    return {
      coupon_type: {
        TICKET: "票务",
        ACTIVITY: "活动",
        YEAR_CARD: "年卡",
        MALL: "商城",
        FOOD: "餐饮",
        // MAP:'地图',
        LINE: "路线",
        WORKSHOP: "工坊",
      },
    };
  },
  components: {
    Left,
  },
  methods: {
    redemption_info(item) {
      this.$emit("get_item_click", item.id);
    },
    get_cpupon(val) {
      uni.setStorageSync("cpupon_details", val);
      uni.navigateTo({
        url: "/pages/my/coupon/details",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.ty-circle-box {
  border-radius: 0 34rpx 34rpx 0;
}
.show-in-top {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(90deg);
  border-radius: 50% 0 0 50%;
}
.show-in-bottom {
  // box-shadow: 1rpx 0px 1rpx rgba(0,102,29,0.15) inset;
  transform: rotate(-90deg);
  border-radius: 50% 0 0 50%;
}
</style>
